/* Source file https://github.com/MrOtherGuy/firefox-csshacks/tree/master/chrome/dual_color_tab_attention_indicator.css made available under Mozilla Public License v. 2.0
See the above repository for updates as well as full license text. */

/* Makes tab attention indicator use two separate colors - by default main color is the toolbar text color, and secondary is accent color of your OS. */

#navigator-toolbox{
  --uc-attention-primary-color: currentColor;
  --uc-attention-secondary-color: AccentColor;
  --uc-attention-indicator-radius: 2.5px;
}
.tabbrowser-tab:is([image], [pinned]) > .tab-stack > .tab-content[attention]:not([selected]),
.tabbrowser-tab > .tab-stack > .tab-content[pinned][titlechanged]:not([selected]),
#firefox-view-button[attention]{
  background-image: radial-gradient(circle,
    var(--uc-attention-primary-color) var(--uc-attention-indicator-radius),
    transparent var(--uc-attention-indicator-radius),
    var(--uc-attention-secondary-color) calc(var(--uc-attention-indicator-radius) + 2px),
    transparent calc(var(--uc-attention-indicator-radius) + 2px)
  ) !important;
  background-position: center bottom var(--uc-attention-indicator-radius) !important;
  background-size: calc(2 * (var(--uc-attention-indicator-radius) + 2px)) calc(2 * (var(--uc-attention-indicator-radius) + 2px)) !important;
  background-repeat: no-repeat;
}